<template>
    <input :value="val" :autofocus="focus"  :type="type" :placeholder="placeholder" 
    :class="['common',radius?'radius':'']"
    @input="handleInput($el)"
    >
</template>
<script lang='ts' setup>
import {defineProps,ref } from "vue";

const props=defineProps({
    focus:{
        type:Boolean,
    }, 
    radius:{
        type:Boolean,
    }, 
    placeholder:{
        type:String,
        default:"请输入..."
    }, 
    type:{
        type:String,
        default:"text"
    }, 
    modelValue: { // 第一步
      type: String,
    },
})


const emits=defineEmits(["update:modelValue"])

const val=ref(props.modelValue)

const handleInput=(e:HTMLInputElement)=>{
    val.value=e.value
    emits("update:modelValue",e.value)
}

</script>
<style lang="scss" scoped>
.common{
    height:40px;
    padding-left: 10px;
    outline:none;
    border:0.5px solid #333
}

.radius{
    border-radius: 10px;
}

</style>